<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">个人信息</span>
          </div>
          <div>
            <ul class="user-info">
              <li><div style="height: 100%"><i class="el-icon-c-scale-to-original" /> 登录账号<div class="user-right"> {{ userInfo.username }}</div></div></li>
              <li><i class="el-icon-user" /> 用户昵称 <div class="user-right"> {{ userInfo.nickName }}</div></li>
              <li><i class="el-icon-rank" /> 所属部门 <div class="user-right"> {{ userInfo.dept.name }}</div></li>
              <li><i class="el-icon-mobile-phone" /> 手机号码 <div class="user-right"> {{ userInfo.phone }}</div></li>
              <li><i class="el-icon-document-copy" /> 用户邮箱 <div class="user-right"> {{ userInfo.email }}</div></li>
              <li>
                <i class="el-icon-goods" /> 安全设置
                <div class="user-right">
                  <a @click="$refs.pass.dialog = true">修改密码</a>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <updatePass ref="pass" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import updatePass from './components/updatePass'
import { getToken } from '@/utils/auth'
export default {
  name: 'Personal',
  components: { updatePass },
  data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      show: false,
      saveLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    cropUploadSuccess(jsonData, field) {
      this.imgDataUrl = jsonData.files.Avatar1
    },
    toggleShow() {
      this.show = !this.show
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.user-info {
  padding-left: 0;
  list-style: none;
  li{
    padding: 16px 0;
    font-size: 13px;
  }
  li:not(:last-child){
    border-bottom: 1px solid #F0F3F4;
  }
  .user-right {
    float: right;
    a{
      color: #317EF3;
    }
  }
}
</style>
